import React from 'react';
import {Form, Input, Button, Modal, Message, Breadcrumb, Icon, Table } from 'antd';
import RebatesRegistModal from './rebatesRegistModal';
const FormItem = Form.Item;

let outAccountInfo = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10
      },
      visible:false,
      selectedrecord:{}
    }
  },

  componentDidMount() {
    this.handleSearch()
  },
  showModal(title,record){
      this.setState({
          visible:true,
          record:record
      })
  },
  hideModal(e) {
    this.setState({
        visible: false,
        selectedrecord:''
    });
  },
  handleTableChange(pagination) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch();
  },

  fetch() {
    var record=this.props.location.state.record;
    var tenementId=record.tenementId;
    let forms = this.props.form.getFieldsValue();
    let page = this.state.pagination.current;
    let params = Object.assign({}, {pageSize: 10, currentPage: page,tenementId:tenementId})
    let _me = this
    Utils.sendAjax({
      url: '/funder/statistics/billList',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  handleSearch() {
    this.setState({
      pagination: {
        current: 1
      }
    })
    this.fetch();
  },
  handleReset() {
    this.props.form.resetFields();
  },
  rowKey(data) {
    return data.financeBillId;
  },

  handleClick() {
      history.go(-1);
  },
  onRowClick(record) {
      this.setState({
          selectedrecord: record
      });
  },
  render() {
    const { getFieldProps } = this.props.form;
    var state=this.state;
    const columns = [
      {
        title: '出账月份',
        dataIndex: 'billDate',
        width: 100,
        fixed: 'left',
      },
      {
        title: '序列特征',
        dataIndex: 'sequenceFeature'
      },
      {
        title: '应收租客金额(元)',
        dataIndex: 'renterCollectAmount'
      },
      {
        title: '实收租客金额(元)',
        dataIndex: 'renterReceivedAmount'
      },
      {
        title: '应付一房东金额(元)',
        dataIndex: 'ownerAmount'
      },
      {
        title: '应收货款总额(元)',
        dataIndex: 'loanAmount'
      },
      {
        title: '应返还房东金额(元)',
        dataIndex: 'landlordCollectAmount'
      },
      {
        title: '实际返还房东金额(元)',
        dataIndex: 'landlordReceivedAmount'
      },
      {
        title: '备注',
        dataIndex: 'remark',
      },
      {
        title: '收款状态',
        dataIndex: 'status',
        render:(value)=>{
          return value==1?'已支付':'未支付'
        }
      }
      //{
      //  title: '操作',
      //  render: (text, record) => {
      //    return (
      //      <a  href="javascript:;" onClick={this.linkTo.bind(this, {url:'/landlord/rentManage/checkOutList/detail'})}>查看详情</a>
      //    )
      //  }
      //},
    ];
    var hasSelected=this.state.selectedrecord.financeBillId?true:false;
    return (
        <div>
            <div className="nav-bar">
                <Breadcrumb separator="-" >
                    <Breadcrumb.Item>出账信息</Breadcrumb.Item>
                </Breadcrumb>
                <Button type="primary" className="returnList" onClick={this.handleClick} style={{marginLeft:-50}}>返回</Button>
            </div>
            {/** <div className="actionBtns" style={{ margin:'20px 0px -13px 20px' }}>
                <button className="ant-btn" disabled={!hasSelected}  onClick={this.showModal.bind(this, '返款登记', state.selectedrecord) }>
                    返款登记
                </button>
            </div> */}
           
            <Table rowKey={this.rowKey} columns={columns} scroll={{ x: 1000 }}
                dataSource={state.data}
                onChange={this.handleTableChange}
                className="tableContainer"
                pagination={state.pagination}
                onRowClick={this.onRowClick}/>
           { state.visible?<RebatesRegistModal ref="RebatesRegistModal" visible={state.visible} hideModal={this.hideModal} selectedrecord={state.selectedrecord}/>:null}
        </div>
    );
  }
});
outAccountInfo = Form.create()(outAccountInfo);
export default outAccountInfo